<template>
	<view>
		<view class="block">
			<view class="title">客户信息</view>
			<view class="item">
				<view class="item_l">
					买方名称
				</view>
				<view class="item_r">
					<input @input="inputchange" v-model="params.customerName" type="text" placeholder-class="inputs"
						placeholder="请输入" />
					<scroll-view scroll-y="true" class="dingbox" v-if="isshow">
						<view class="dingtxt oneline" v-for="(item,index) in nameList" :key="index"
						@click="nameChange(item)">
							{{item.customerName}}
						</view>
						<view class="texrts" v-if="nameList.length==''">
							暂无数据
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					联系人
				</view>
				<view class="item_r">
					<input v-model="params.customerUser" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					电话
				</view>
				<view class="item_r">
					<input v-model="params.customerPhone" type="text" maxlength="32" placeholder-class="inputs"
						placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					传真
				</view>
				<view class="item_r">
					<input v-model="params.customerFax" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					地址
				</view>
				<view class="item_r">
					<input v-model="params.customerAddress"
					 maxlength="50" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
		</view>

		<view class="block" v-for="(item,index) in params.productList" :key="index">
			<view class="title">
				<view class="">
					产品信息
				</view>
				<view class="tit_r" v-if="index>=1" @click="delectpro(item,index)">
					<image src="/static/sc.png" mode=""></image>
					删除
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					产品名称
				</view>
				<view class="item_r">
					<input @input="inputchange1($event,item,1)" v-model="item.productName" type="text" placeholder-class="inputs"
						placeholder="请输入" />
					<scroll-view scroll-y="true" class="dingbox" v-if="item.isokname">
						<view class="dingtxt oneline" v-for="(iname,idx) in nameList1" :key="idx"
						@click="nameChanges(item,iname,1)">
							{{iname.name}}
						</view>
						<view class="texrts" v-if="nameList1.length==''">
							暂无数据
						</view>
					</scroll-view>
				</view>
			<!-- 	<view class="item_r">
					<input v-model="item.productName" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view> -->
			</view>
			<view class="item">
				<view class="item_l">
					型号/规格
				</view>
			<!-- 	<view class="item_r">
					<input v-model="item.productSpecs" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view> -->
				
				<view class="item_r">
					<input @input="inputchange1($event,item,2)" v-model="item.productSpecs" type="text" placeholder-class="inputs"
						placeholder="请输入" />
					<scroll-view scroll-y="true" class="dingbox" v-if="item.isokspecs">
						<view class="dingtxt oneline" v-for="(iname,idx) in nameList1" :key="idx"
						@click="nameChanges(item,iname,2)">
							{{iname.name}}
						</view>
						<view class="texrts" v-if="nameList1.length==''">
							暂无数据
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					单位
				</view>
				<view class="item_r">
					<input v-model="item.productUnit" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					数量
				</view>
				<view class="item_r">
					<input v-model="item.productCount" type="number" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					交期
				</view>
				<view class="item_r1">
					<uni-datetime-picker type="date" v-model="item.deliveryTime">
						<view class="" style="display: flex;align-items: center;">
							<span
								:style="{color:item.deliveryTime?'#000':''}">{{item.deliveryTime?item.deliveryTime:'请选择'}}</span>
							<image class="logo" src="/static/t1.png"></image>
						</view>
					</uni-datetime-picker>
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					备注
				</view>
				<view class="item_r">
					<input v-model="item.remark" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					含税单价<span>(税率13%)</span>
				</view>
				<view class="item_r">
					<input v-model="item.priceInclusive" type="text" placeholder-class="inputs" placeholder="请输入" />
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					未税单价
				</view>
				<view class="item_r">
					{{wsprice(item)|numberToCurrencyNo}}
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					含税小计
				</view>
				<view class="item_r">
					{{hsprice(item)|numberToCurrencyNo}}
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					未税小计
				</view>
				<view class="item_r">
					{{wxx(item)|numberToCurrencyNo}}
				</view>
			</view>
		</view>
		<view class="btn" @click="add" v-if="params.productList.length <7">
			<view class="b_flex">
				<uni-icons size="25" style="margin-right: 10rpx;" type="plus-filled" color="#3658FF"></uni-icons>
				新建报价单
			</view>
		</view>
		<view class="block">
			<view class="title">报价信息</view>
			<view class="textflex">
				<view class="flex_b">
					<view class="f">
						<view class="">件数</view>
						<view class="" style="margin-left: 15rpx;">{{countNum}}</view>
					</view>
					<view class="f">
						<view class="">未税</view>
						<view class="" style="margin-left: 15rpx;">{{wsAllprice|numberToCurrencyNo}}</view>
					</view>
				</view>
				<view class="flex_b" style="margin-top: 16rpx;">
					<view class="f">
						<view class="">含税</view>
						<view class="" style="margin-left: 15rpx;">{{hsAllprice|numberToCurrencyNo}}</view>
					</view>
					<view class="f">
						<view class="">税额</view>
						<view class="" style="margin-left: 15rpx;">{{sk|numberToCurrencyNo}}</view>
					</view>
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					付款计划
				</view>
				<view class="item_r1" @click="openPopup('付款计划','self_order_pay_plan',mevalue.payPlan)">
					<span class="select" :class="mevalue.payPlan==''?'':'selectact'">
						{{mevalue.payPlan?mevalue.payPlan:'请选择'}}
					</span>
					<uni-icons type="right" color="#3658FF"></uni-icons>
				</view>
			</view>
			<view class="item">
				<view class="item_l">
					产品交期
				</view>
				<view class="item_r1"
					@click="openPopup('产品交期','self_order_product_delivery_time',mevalue.deliveryTime)">
					<span class="select" :class="mevalue.deliveryTime==''?'':'selectact'">
						{{mevalue.deliveryTime?mevalue.deliveryTime:'请选择'}}
					</span>
					<uni-icons type="right" color="#3658FF"></uni-icons>
				</view>
			</view>
			<view class="item" style="border: none;">
				<view class="item_l">
					产品附件
				</view>
			</view>
			<view class="textarea">
				<textarea maxlength="25" v-model="params.remark" auto-height placeholder="请输入" placeholder-class="inputs"></textarea>
			</view>
		</view>
		<view class="footerbtn" @click="handleSave">
			<view class="cont">
				<view class="btn">
					保存
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom" :safe-area="false">
			<view class="popup_jh">
				<view class="title">
					{{textType}}
				</view>
				<uni-icons @click="closepop" class="icon" color="#D1D1D6" type="closeempty" size="27"></uni-icons>
				<scroll-view scroll-y="true" class="scroll">
					<view class="its" v-for="(item,index) in list" :key="index" @click="changeType(item)"
						:class="item.dictLabel==dictLabel?'itsact':''">
						{{item.dictLabel}}
					</view>
				</scroll-view>
			</view>
		</uni-popup>
		<view class="" style="height: 200rpx">

		</view>
	</view>
</template>

<script>
	import {
		orderAdd,
		orderInfo,
		orderEdit,
		customerList,
		getdict,
		customerspecs
	} from '@/common/http.api.js';
	export default {
		data() {
			return {
				textType: '',
				dictLabel: '',
				list: [],
				mevalue: {
					payPlan: '',
					deliveryTime: '',
				},
				params: {
					customerName: '',
					customerUser: '',
					customerPhone: '',
					customerFax: '',
					customerAddress: '',
					payPlan: '',
					deliveryTime: '',
					remark: '',
					productList: [{
						productName: '',
						productSpecs: '',
						productUnit: '',
						productCount: '',
						deliveryTime: '',
						remark: '',
						priceInclusive: '',
						isokname:false,
						isokspecs:false,
					}]
				},
				istype: 0, //0 添加 1 修改
				id: '',

				nameList: [],
				isshow: false, //显示关闭
				
				nameList1:[],
				nameList2:[],
			};
		},
		computed: {
			wsprice(item) {
				return function(item) {
					if (item.priceInclusive) {
						let num = (item.priceInclusive / (1 + 0.13)).toFixed(2)
						return num
					} else {
						return 0
					}
					item.wsprice = num
				}
			},
			hsprice() {
				return function(item) {
					if (item.priceInclusive && item.productCount) {
						let num = (item.priceInclusive * item.productCount).toFixed(2)
						return num
					} else {
						return 0
					}
				}
			},
			wxx() {
				return function(item) {
					if (item.priceInclusive && item.productCount) {
						let num = ((item.priceInclusive / (1 + 0.13)) * item.productCount).toFixed(2)
						return num
					} else {
						return 0
					}
				}
			},
			countNum() {
				let num = this.params.productList.reduce((sum, current) => sum += current.productCount * 1, 0)
				return num
			},
			wsAllprice() {
				let num = this.params.productList.reduce((sum, current) =>
					sum += ((current.priceInclusive / (1 + 0.13)) * current.productCount), 0)
				return num.toFixed(2)
			},
			hsAllprice() {
				let num = this.params.productList.reduce((sum, current) =>
					sum += (current.priceInclusive * current.productCount), 0)
				return num.toFixed(2)
			},
			sk() {
				let num = this.params.productList.reduce((sum, current) =>
					sum += ((current.priceInclusive / (1 + 0.13)*0.13 ) * current.productCount), 0)
				return num.toFixed(2)
			}
		},
		onLoad(option) {
			console.log(option);
			this.istype = option.istype
			if (option.id) {
				this.id = option.id
				uni.setNavigationBarTitle({
					title: '报价单修改'
				})
				orderInfo({
					id: option.id
				}).then(res => {
					this.params = res.data
					this.mevalue.payPlan = res.data.payPlan
					this.mevalue.deliveryTime = res.data.deliveryTime
				})
			}
		},
		methods: {
			closepop() {
				this.$refs.popup.close()
			},
			openPopup(text, url, value) {
				this.list = []
				this.textType = text //弹窗
				getdict(url).then(res => {
					this.list = res.data
					this.dictLabel = this.list.find(item => item.dictLabel == value)?.dictLabel
					this.$refs.popup.open()
				})
			},
			changeType(item) {
				console.log(this.textType, item);
				if (this.textType == '付款计划') {
					this.mevalue.payPlan = item.dictLabel
					this.params.payPlan = item.dictValue
				} else if (this.textType == '产品交期') {
					this.mevalue.deliveryTime = item.dictLabel
					this.params.deliveryTime = item.dictValue
				}
				this.$refs.popup.close()
			},
			inputchange1(e,item,type){
				this.$chattering(() => {
					if (e.detail.value != '') {
						customerspecs({
							name: e.detail.value,
							type:type
						}).then(res => {
							this.nameList1 = res.rows
							
							if(this.nameList1.length!=0){
								if(type == 1){
									item.isokname = true
								}else{
									item.isokspecs = true
								}
							}else{
								if(type == 1){
									item.isokname = false
								}else{
									item.isokspecs = false
								}
								
							}
						})
					} else {
						if(type == 1){
							item.isokname = false
						}else{
							item.isokspecs = false
						}
					}
				}, 500)
			},
			inputchange(e) {
				this.$chattering(() => {
					if (e.detail.value != '') {
						customerList({
							customerName: e.detail.value
						}).then(res => {
							this.nameList = res.rows
							if(this.nameList.length!=0){
								this.isshow = true
							}else{
								this.isshow = false
							}
						})
					} else {
						this.isshow = false
					}
				}, 500)
			},
			add() {
				this.params.productList.push({
					productName: '',
					productSpecs: '',
					productUnit: '',
					productCount: '',
					deliveryTime: '',
					remark: '',
					priceInclusive: '',
				})
			},
			delectpro(item, index) {
				this.params.productList.splice(index, 1)
			},
			nameChanges(item,iname,type){
				console.log(item,iname,type);
				if(type == 1){
					item.productName = iname.name
					item.isokname = false
				}else{
					item.productSpecs = iname.name
					item.isokspecs = false
				}
				
			},
			nameChange(item){
				this.params.customerName= item.customerName
				this.params.customerUser= item.customerUser
				this.params.customerPhone= item.customerPhone
				this.params.customerFax= item.customerFax
				this.params.customerAddress= item.customerAddress
				this.isshow = false
			},
			handleSave() {
				if(this.params.customerName ==''){
					uni.showToast({
						icon:'none',
						title:'买方名称不能为空'
					})
					return
				}
				let isproductName = this.params.productList.every(item=>item.productName!='')
				if(!isproductName){
					uni.showToast({
						icon:'none',
						title:'产品名称不能为空'
					})
					return
				}
				let isproductUnit = this.params.productList.every(item=>item.productUnit!='')
				if(!isproductUnit){
					uni.showToast({
						icon:'none',
						title:'请输入产品单位'
					})
					return
				}
				let isproductCount = this.params.productList.every(item=>item.productCount!='')
				if(!isproductCount){
					uni.showToast({
						icon:'none',
						title:'请输入产品数量'
					})
					return
				}
				let ispriceInclusive = this.params.productList.every(item=>item.priceInclusive!='')
				if(!ispriceInclusive){
					uni.showToast({
						icon:'none',
						title:'请输入含税单价'
					})
					return
				}
			
				
				if (this.istype == 1) {
					orderEdit(this.params).then(res => {
						console.log(res);
						uni.navigateTo({
							url: `/pages/index/quotationdetail?id=${this.id}`
						})
					})
				} else {
					orderAdd(this.params).then(res => {
						console.log(res);
						uni.navigateTo({
							url: `/pages/index/quotationdetail?id=${res.data.id}`
						})
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F8FA;
	}

	.block {
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 30rpx;
		box-sizing: border-box;
		margin: 20rpx auto;

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 32rpx;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.tit_r {
				display: flex;
				align-items: center;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #979797;
			}

			image {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}
		}

		.item {
			margin-top: 36rpx;
			padding-bottom: 24rpx;
			border-bottom: 1px solid #DADADA;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.item_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #979797;

				span {
					color: #FD2B1C;
					font-size: 24rpx;
				}
			}

			.item_r1 {
				margin-left: 20rpx;
				position: relative;
				text-align: right;
				font-size: 28rpx;
				color: #9D9D9D;

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.selectact {
					color: #000;
				}
			}

			.item_r {
				flex: 1;
				margin-left: 20rpx;
				position: relative;
				text-align: right;
				font-size: 28rpx;

				input {
					font-size: 28rpx;
					text-align: right;
					// border: 1px solid red;
				}

				image {
					width: 48rpx;
					height: 48rpx;
				}

				.dingbox {
					position: absolute;
					right: 0rpx;
					width: 420rpx;
					height: 300rpx;
					top: 70rpx;
					background-color: #FFFFFF;
					border: 1px solid #DADADA;
					z-index: 666;
					border-radius: 0rpx 0rpx 20rpx 20rpx;
					.texrts{
						width: 280rpx;
						height: 300rpx;
						text-align: center;
						line-height: 300rpx;
						font-size: 28rpx;
						color: #DADADA;
					}

					.dingtxt {
						font-size: 28rpx;
						color: #000;
						text-align: center;
						line-height: 70rpx;
						border-bottom: 1px dashed #DADADA;
						padding: 0rpx 10rpx;
						box-sizing: border-box;
						white-space: nowrap;
						overflow: hidden;
						// text-overflow:ellipsis;
					}

					.dingtxt:last-child {
						border: none;
					}
				}
			}
		}

		.item:last-child {
			padding-bottom: 0rpx;
			border: none;
		}

		.textarea {
			width: 650rpx;
			min-height: 160rpx;
			background: #F7F8FA;
			border-radius: 20rpx 20rpx 20rpx 20rpx;

			textarea {
				padding: 22rpx 30rpx;
				font-size: 28rpx;
			}
		}

		.textflex {
			margin-top: 28rpx;
			width: 650rpx;
			height: 140rpx;
			background: #F7F8FA;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			padding: 26rpx 34rpx;
			box-sizing: border-box;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #9D9D9D;

			.flex_b {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.f {
					display: flex;
					width: 50%;
				}
			}
		}
	}

	.btn {
		width: 710rpx;
		height: 120rpx;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 20rpx auto;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #3658FF;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;

		.b_flex {
			display: flex;
			align-items: center;
		}
	}

	.popup_jh {
		width: 750rpx;
		height: 620rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 0rpx 0rpx;
		padding: 48rpx 54rpx;
		box-sizing: border-box;
		position: relative;

		.icon {
			right: 54rpx;
			top: 48rpx;
			position: absolute;
		}

		.title {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 40rpx;
			color: #000000;
			text-align: center;
		}

		.scroll {
			margin-top: 50rpx;
			height: 400rpx;

			.its {
				width: 600rpx;
				height: 100rpx;
				background: #F7F8FA;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				margin: 20rpx auto;
				text-align: center;
				line-height: 100rpx;
				color: #333333;
			}

			.itsact {
				background: #3658FF;
				color: #FFFFFF;
			}
		}
	}

	.footerbtn {
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0%;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 3;

		.cont {
			display: flex;
			padding: 10rpx 20rpx;
			height: 120rpx;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 32rpx;
			align-items: center;
			justify-content: center;

			.btn {
				width: 400rpx;
				height: 80rpx;
				background: #3658FF;
				border-radius: 40rpx;
				color: #FFFFFF;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 80rpx;
				text-align: center;
			}

			.absbtn {
				background: #808080;
			}
		}
	}
</style>